<template>
<view class="main-container1">
	<view class="head-part">
		<view class="type-view">
		</view>
		<view class="search">
			<input placeholder="产品名称/产品备注" v-model="keyword" confirm-type="search" @blur="onSearch" @confirm="onSearch"/>
		</view>
	</view>
	<scroll-view class="card-page-list" style="height: calc(100vh - 130rpx);" scroll-y="true"
				@scrolltolower="onLoadNextPage">
		<view class="single-customer" v-for="(obj, index) in dataList" :key="obj.id">
			<view class="index">
				<view class="index-con">￥{{obj.price}}</view>
				<view class="edit-btn" @click="onDetail(obj)">修改</view>
			</view>
			<view class="content">
				<view class="name"><span :class="'status-span status-'+obj.status">{{obj.status==='1'?'启用':'停用'}}</span><span :class="'status-span status-'+obj.canPrebook">{{obj.canPrebook==='1'?'可预约':'不可预约'}}</span>{{obj.name}} </view>
				<view class="worker" v-if="obj.remark">{{obj.remark}}</view>
				<view class="shop-name" v-if="!obj.updateTime">创建于：{{obj.createTime}}</view>
				<view class="shop-name" v-if="obj.updateTime">修改于：{{obj.updateTime}}</view>
			</view>
		</view>
		<auto-loadMore :msg="hasNextPage?'加载中...':'加载完成'"/>
	</scroll-view>
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			total: 0,
			dataList: [],
			hasNextPage: true,
			keyword: '',
			page: 1,
			searchTime: 0,
		}
	},
	onLoad(options) {
		that = this;
		if(options.keyword) {
			that.keyword = options.keyword;
		}
		that.loadData(false);
	},
	methods: {
		loadData: function(isNext) {
			// console.log("===========", that.page)
			that.$request.get("/product/listProduct", {keyword: that.keyword, pageNum: that.page}).then((res) => {
				console.log(res)
				that.total = res.total;
				if(isNext) {
					that.dataList = [...that.dataList, ...res.rows];
				} else {
					that.dataList = res.rows;
				}
				that.hasNextPage = res.hasNextPage;
				that.resetTitle();
			})
		},
		onDetail: function(obj) {
			uni.navigateTo({
				url: "/pages/product/add?id="+obj.id
			})
		},
		onSearch: function() {
			const curTime = new Date().getTime();
			if(curTime - that.searchTime>800) {
				// console.log("============", that.keyword)
				that.searchTime = curTime;
				that.loadData(false);
			}
		},
		onLoadNextPage: function() {
			if(that.hasNextPage) {
				that.page = that.page + 1;
				that.loadData(true);
			}
		},
		resetTitle: function() {
			uni.setNavigationBarTitle({
				title: "产品列表（"+that.total+"）"
			})
		},
	}
}
</script>

<style lang="scss">
.page {
	background:#e8e8e8;
}
.single-customer {
	border-bottom: 1px #ddd solid; padding: 20rpx; margin-top: 20rpx; display: inline-flex; width: 100%;
	background: linear-gradient(to bottom right, #fefefe, #ebebeb); border-top: 1px #e8e8e8 solid;
	
	.index {
		width: 200rpx;
		.index-con, .edit-btn {
			width: 180rpx; height: 60rpx; line-height: 60rpx; border-radius: 40rpx; border:1px #ddd solid; margin-left: 10%; margin-top: 10%;
			text-align: center; vertical-align: middle; line-height: 2.5; font-size: 26rpx; color:#444;
		}
		
		.edit-btn {
			font-size: 24rpx;
		}
	}
	.content {
		flex: 1; padding-left: 20rpx;
		.name {
			color:#333; padding-bottom: 20rpx; line-height: 1.8; padding-right: 24rpx;
			
			view {
				display: inline; padding: 0px 10rpx;
			}
		}
		.worker {
			color:#999; font-size: 26rpx; margin-top: 12rpx;
		}
		.shop-name {
			color:#999; font-size: 26rpx; margin-top: 12rpx;
		}
	}
	
}
.head-part {
	width: 100%; border-bottom:2px #f70 solid; display: inline-flex; padding: 24rpx 0px; background:#fffbf6;
	box-shadow: 0px 0px 6px 6px #ccc;
	
	.type-view {
		display: inline-flex; margin-left: 24rpx; border-radius: 10rpx 0 0 10rpx;
		view {
			font-size: 24rpx; padding: 0rpx 20rpx; display: inline; height: 62rpx; line-height: 62rpx; background:#FFF;
		}
		view:first-child {
			border-radius: 10rpx 0px 0px 10rpx;
		}
		view:end-child {
			border-radius: 0px 10px 10px 0px;
		}
		view.current {
			background:#F70; color:#FFF;
		}
	}
	.search {
		flex: 1; padding-right: 24rpx;
		
		input {
			background:#FFF; font-size: 28rpx; border:1px #F70 solid; border-width: 1px 1px 1px 1px; border-radius: 10rpx 10rpx 10rpx 10rpx; height: 62rpx; padding: 0px 12rpx;
		}
	}
}
.card-page-list {
}
</style>
